<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <ul class="container">
            <li v-for="item in dataList" :key="item.id">
                <h4>{{ item.name }}</h4>
                <div>
                    <div v-for="subItem in item.children" :key="subItem.id">
                        <div @click="handleJumpList(item, subItem)">
                            <p :class="subItem.count > 0 ? '' : 'gray'">
                                {{ subItem.count }}
                            </p>
                            <span>{{ subItem.name }}</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
    name: "AllResourceData"
})
export default class AllResourceData extends Vue {
    dataList: any = [];

    created() {
        this.getALLdata();
    }

    activated() {
        this.getALLdata();
    }

    async getALLdata() {
        const res = await this.$server["allResourceData/getResourceCount"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
        }
    }

    handleJumpList(arg: any, item: any) {
        this.$router.push({
            name: "ResourceList",
            query: {
                title: item.name,
                typeId: item.id,
                field: item.field,
                typeName: `${arg.name}/${item.name}`
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
        background-color: transparent !important;
    }
}

.container {
    * {
        margin: 0;
    }
    li {
        display: flex;
        width: 100%;
        background-color: #ffffff;
        padding: 10px;
        & + li {
            margin-top: 10px;
        }
        h4 {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #37383a;
            width: 130px;
            padding-left: 44px;
            position: relative;
            display: flex;
            align-items: center;
            &::before {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                position: absolute;
                left: 24px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        & > div {
            flex: 1;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            & > div {
                display: flex;
                width: calc(100% / 8);
                flex-wrap: wrap;
                padding: 0 12px;
                &:nth-child(n + 9) {
                    margin-top: 12px;
                }
                div {
                    width: 100%;
                    height: 80px;
                    background: #ffffff;
                    border: 1px solid #ecebf2;
                    opacity: 1;
                    border-radius: 7px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    &:hover {
                        border: 1px solid #ffd1d1;
                        box-shadow: 0px 3px 7px rgba(253, 123, 123, 0.39);
                    }
                    p {
                        font-size: 28px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #37383a;
                        &.gray {
                            color: #ecebf2;
                        }
                    }
                    span {
                        font-size: 14px;
                        font-family: PingFang SC;
                        color: #909398;
                        margin-top: 6px;
                    }
                }
            }
        }
        &:nth-child(3n + 1) h4::before {
            background: #de2728;
        }
        &:nth-child(3n + 2) h4::before {
            background-color: #32a78f;
        }
        &:nth-child(3n + 3) h4::before {
            background-color: #eab846;
        }
    }
}
</style>
